<template>
  <div class="notice-card-wrapper">
    <img src="../../assets/images/notification.png" alt="" />
    <div class="wrap">
      <div ref="box" class="box">
        <div ref="marquee" class="marquee">{{ text }}</div>
        <div ref="copy" class="copy"></div>
      </div>
    </div>
    <div ref="node" class="node">{{ text }}</div>
  </div>
</template>

<script>
import { infoList } from "@/api/codeversion/notification";
export default {
  data() {
    return {
      inFon: [],
      timer: null,
      text: "", // 数组文字转化后的字符串
      timerMove: null,
      path: `ws://${window.location.host}${
        process.env.VUE_APP_BASE_API
      }/websocket/message/${localStorage.getItem("userId")}`,
      socket: "",
    };
  },
  computed: {},
  created() {},
  methods: {
    getList() {
      infoList().then((res) => {
        this.inFon = res.data;
        this.inFon.forEach((item) => {
          this.text = `${this.text}  ${item.messageContext.replace(
            /[\r\n]/g,
            ""
          )}`;
        });
      });
    },
    move() {
      clearInterval(this.timerMove);
      // 获取文字text 的计算后宽度  （由于overflow的存在，直接获取不到，需要独立的node计算）
      let width = this.$refs.node.getBoundingClientRect().width;
      this.$refs.copy.innerText = this.text; // 文字副本填充
      let distance = 0; // 位移距离
      // 设置位移
      this.timerMove = setInterval(() => {
        distance = distance - 1;
        // 如果位移超过文字宽度，则回到起点
        if (-distance >= width) {
          distance = 16;
        }
        this.$refs.box.style.transform = "translateX(" + distance + "px)";
      }, 100);
    },
    init() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open() {
      console.log("socket连接成功");
    },
    error() {
      console.log("连接错误");
    },
    getMessage(msg) {
      clearInterval(this.timer);
      this.text = msg.data;
      this.timer = setTimeout(() => {
        this.text = "";
      }, 30000);
    },
    // 发送消息给被连接的服务端
    send(params) {
      this.socket.send(params);
    },
    close() {
      console.log("socket已经关闭");
    },
  },
  // 销毁定时器
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timerMove);
    // 销毁监听
    this.socket.onclose = this.close;
  },
  // 更新的时候运动
  updated() {
    this.move();
  },
  // 定时器开始
  mounted() {
    // this.getList();
    // this.timer = setInterval(() => {
    //   this.getList();
    // }, 300000);
    // 初始化
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.notice-card-wrapper {
  width: calc(100vh * 350 / 1080);
  height: calc(100vh * 40 / 1080);
  // margin-top: calc(100vw * 10 / 1920);
  border: 1px solid #3399ff;
  background: #0d366a;
  // background: linear-gradient(
  //   90deg,
  //   rgba(0, 150, 255, 0.5),
  //   rgba(0, 152, 248, 0)
  // );
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 5px;
}
.el-carousel__indicators--vertical {
  display: none;
}
.medium {
  width: 100%;
  height: 100%;
}
.medium-item {
  width: 98%;
  height: 100%;
  display: flex;
  align-items: center;

  span {
    cursor: default;
    width: 100%;
    display: inline-block;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
}
::v-deep .el-carousel__container {
  height: 100%;
}
.wrap {
  overflow: hidden;
}
.box {
  width: 8000000%;
}
.box div {
  float: left;
}
.marquee {
  margin: 0 16px 0 0;
}
.node {
  position: absolute;
  z-index: -999;
  top: -999999px;
}
</style>
